<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4-1-属性绑定</title>
		<style>
			div{
				font-size: 25px;
			}
			.red {
				color: #FF0000;
				
			}

			.green {
				color: #3CB371;
				
			}

			.blue {
				color: #4169E1;
				
			}

			.grey {
				color: #696969;
			}

			.orange {
				color: coral;
			}

			.seablue {
				color: steelblue;
			}
		</style>
	</head>
	<body>
		<!-- a标签的 属性绑定
		     需求：href中的属性动态赋值
			 语法：v-bind:href='VUE中的属性'-->
		<div id="app">
			<a v-bind:href="url">百度</a>
			<!-- 设置  中文输入使用英文标点 程序员必备-->
			<!-- 简化写法-->
			<a :href="url">百度</a>

			<!-- 2.class类型绑定
				 class中定义多个样式 简化程序
				 
				 -->
			<div :class="clas" >111111</div>
			<input type="button" @click="change" value="切换" />
			<!-- <select v-model="clas">
				<option value="red">red</option>
				<option value="green">green</option>
				<option value="blue">blue</option>
			</select> -->

<!-- 3.属性切换
 需求 通过按钮控制样式是否展现属性
 语法::class={class类型的名称:false}-->
 
			<div :class="{red: flag}">1111111111111</div>
			<!-- 无效写法 -->
			<div :class="{clas: flag}">??????????</div>
			<input type="button"@click="flag=!flag"value="切换是否展示" />


			<div :class="clas1">有没有人曾告诉你我很爱你</div>
			<select v-model="clas1">
				<!-- 选择器不能以数字为名字-->
				<option value="red">red</option>
				<option value="blue">blue</option>
				<option value="green">green</option>
				<option value="grey">grey</option>
				<option value="orange">orange</option>
				<option value="seablue">seablue</option>

			</select>



		</div>




		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				//不要忘记# .等符号
				el: '#app',
				data: {
					url: '',
					clas: 'red',
					flag:true,
					clas1: 'red'
				},
				methods: {
					change() {
						let str = this.clas == "red" ? "green" : "red"
						this.clas = str
					}
				}

			})
		</script>
	</body>
</html>
